<template>
  <view>
    <view class="cateBox">
      <!-- 左侧列表 -->
      <scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>
        <view class="cate-left-list" v-for="(item,index) in data" :key="index" @click="tapselect(index)">
          <!-- activeItem为选中状态 -->
          <view class="cate-left-item " :class="{activeItem:currentTab==index}">
            <label></label><text>{{item.navtitle}}</text>
          </view>
        </view>
      </scroll-view>

      <!-- 右侧列表 -->
      <scroll-view class="cate-right" scroll-y="true" @scroll="mainScroll" :scroll-into-view="'cate-'+mainCur"
        scroll-with-animation>
        <!-- 小轮播图 -->
        <view class="kimbanner">
          <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
            <swiper-item class="swiperson" v-for="(item,i) in swiperlist" :key="i">
              <view class="swiper-item">
                <image :src="item.img" mode="widthFix"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <!-- 小轮播图 -->
        <view v-for="(item,index) in data" :key="index" :id="'cate-'+index">
          <view class="cate-right-title">
            <text>{{item.navtitle}}</text>
            <image src="/static/order/zan.png" class="zan" mode="widthFix"></image>
          </view>
          <view class="cate-right-list">
            <view class="cate-right-item" v-for="(child,childindex) in item.shop" :key="childindex"
              @click="itemClick(child)">
              <!-- <image :src="child.shopimage" mode=""></image>
              <text>{{child.shoptitle}}</text> -->
              <view class="lala">
                <view class="laleft">
                  <image src="/static/logo.png" class="laimg" mode="widthFix"></image>
                </view>
                <view class="laright">
                  <view class="latit">
                    勤学早餐
                  </view>
                  <view class="latext">
                    购买三明治,享早餐指定饮品半...
                  </view>
                  <view class="lamoney">
                    <view class="money">
                      ￥18.5
                    </view>
                    <image src="/static/order/add.png" class="lamoneyimg" mode="widthFix"></image>
                  </view>
                </view>
              </view>

            </view>
          </view>
        </view>
        <view style="height: 50rpx;"></view>
      </scroll-view>
    </view>



  </view>

</template>

<script>
  export default {
    name: 'cc-headSearch',
    props: {

      data: {
        type: Array,
        default () {
          return []
        }
      }


    },
    data() {
      return {
        currentTab: 0,
        mainCur: 0,
        verticalNavTop: 0,
        list: [{}],
        swiperlist: [{
          img: '/static/index/swiper1.jpg'
        }, {
          img: '/static/index/swiper2.jpg'
        }, {
          img: '/static/index/swiper3.jpg'
        }]
      }
    },
    mounted() {
      this.getHeight();
    },
    methods: {
      itemClick(item) {

        this.$emit('click', item)

      },
      //点击左侧按钮
      tapselect(index) {
        this.currentTab = index;
        this.mainCur = index;
        this.verticalNavTop = (index - 1) * 50
      },
      //右侧滚动
      mainScroll(e) {
        let scrollTop = e.detail.scrollTop + 10;
        for (let i = 0; i < this.list.length; i++) {
          if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
            this.currentTab = i;
            this.verticalNavTop = (i - 1) * 50
            return false
          }
        }
      },
      //获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
      getHeight() {
        var top = 0;
        var bottom = 0;
        var temp = 0;
        for (let i = 0; i < this.data.length; i++) {
          let view = uni.createSelectorQuery().select("#cate-" + i);
          view.fields({
            size: true
          }, data => {
            top = temp;
            bottom = temp + data.height;
            this.list[i] = {
              top: top,
              bottom: bottom
            };
            temp = bottom;
          }).exec();
        }

      }
    }


  }
</script>

<style lang="scss">
  .cateBox {
    position: absolute;
    top: 170rpx;
    bottom: 0;
    background: #fff;
    width: 100%;
    display: flex;
  }

  .cate-left {
    width: 200rpx;
    background: #f4f4f4;
    height: 100%;
  }

  .cate-left-item {
    background: #f4f4f4;
    height: 50px;
    display: flex;
    align-items: center;
  }

  .cate-left-item.activeItem {
    background: #fff;
  }

  .cate-left-item label {
    width: 4rpx;
    height: 15px;
    float: left;
    background: #f4f4f4;
  }

  .cate-left-item.activeItem label {
    background: #0bbbef;
  }

  .cate-left-item text {
    width: 196rpx;
    font-size: 28rpx;
    display: block;
    text-align: center;
  }

  /* 右侧*/
  .cate-right {
    flex: 1;
    padding: 20rpx;
    box-sizing: border-box;
  }

  .cate-right-title {
    font-size: 28rpx;
    margin-top: 20rpx;
    line-height: 80rpx;
    position: relative;
    display: flex;
    align-items: center;
  }


  .cate-right-title text {
    background: #fff;
    padding: 0 10px;
    position: relative;
    color: #999;
  }

  .zan {
    width: 30rpx;
    height: 20rpx;
  }

  .cate-right-list {
    height: auto;
    overflow: hidden;
  }

  .cate-right-item {
    // width: 33.33%;
    // float: left;
    // margin-top: 20rpx;
    width: 100%;
    aspect-ratio: 10;
    margin-bottom: 10rpx;
  }

  .lala {
    width: 100%;
    display: flex;
  }

  .laleft {
    width: 30%;

    .laimg {
      width: 100%;
    }
  }

  .laright {
    width: 70%;
    padding-left: 18rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


    .latext {
      font-size: 0.8rem;
      color: #A4A5A6;
      max-width: 100%;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .lamoney {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .money {
        font-size: 0.9rem;
        font-weight: bold;
      }

      .lamoneyimg {
        width: 44rpx;
        height: 20rpx;
      }
    }
  }

  // .cate-right-item image {
  //   width: 160rpx;
  //   height: 160rpx;
  //   display: block;
  //   margin: 0 auto;
  // }

  // .cate-right-item text {
  //   display: block;
  //   text-align: center;
  //   font-size: 24rpx;
  // }

  /* 小轮播图 */
  .kimbanner {
    height: 300rpx;


    .swiperson {
      border-radius: 16rpx;
    }
  }

  /* 小轮播图 */
</style>